<template>
    <div>
        <el-dialog :title="title" :visible="dialogFormVisible" 
            v-loading="dialogLoading"
            :close-on-click-modal="false"
            @close="dialogClose" width="80%"
            >
            <el-form :model="form" :rules="rules" ref="form" :disabled="disabled">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="合同编号:"  prop='contractNo'>
                    <el-select
                      v-model="form.contractNo"
                      filterable
                      remote
                      placeholder="请输入合同编号"
                      :remote-method="inputContractNoMethod"
                      :loading="inputContractNoLoading"
                      @change="contractNoChange" clearable
                      >
                        <el-option
                          v-for="item in inputContractNoArray"
                          :key="item.contractNo"
                          :label="item.contractNo"
                          :value="item.contractNo"
                        >
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="产品名称:" >
                    {{form.productName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="折标系数:" >
                    {{form.standardCoefficient}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="资产受让人:" prop='customerName'>
                    <el-autocomplete
                      v-model="form.customerName"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入资产受让人"
                      @select="selectName" clearable
                    >
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <div class="idcard">{{ item.idCard }}</div>
                    </template>
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证号:"  prop='idCard'>
                    <el-input type="text" auto-complete="off" placeholder="请输入身份证号" v-model="form.idCard" 
                    clearable  >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="生日:"  prop='birthday'>
                    <el-date-picker
                      v-model="form.birthday"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :picker-options="birthdayOptions">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄:"  prop='age'>
                    <el-input type="text" auto-complete="off" placeholder="请输入年龄" v-model="form.age" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别:"  prop='sex'>
                      <el-radio v-model="form.sex" label="男">男</el-radio>
                      <el-radio v-model="form.sex" label="女">女</el-radio>  
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="打款账号:"  prop='payBankCard'>
                    <el-input type="text" auto-complete="off" placeholder="请输入打款账号" v-model="form.payBankCard" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收款账号:"  prop='receiveBankCard'>
                    <el-input type="text" auto-complete="off" placeholder="请输入收款账号" v-model="form.receiveBankCard" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="打款银行开户行:"  prop='payOpeningBank'>
                    <el-input type="text" auto-complete="off" placeholder="请输入打款银行开户行" v-model="form.payOpeningBank" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收款银行开户行:"  prop='receiveOpeningBank'>
                    <el-input type="text" auto-complete="off" placeholder="请输入收款银行开户行" v-model="form.receiveOpeningBank" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="联系电话:"  prop='telPhone'>
                    <el-input type="text" auto-complete="off" placeholder="请输入联系电话" v-model="form.telPhone" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="联系地址:"  prop='address'>
                    <el-input type="text" auto-complete="off" placeholder="请输入联系地址" v-model="form.address" 
                      clearable>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="付款方式:" prop="investmentType">
                    <el-select v-model="form.investmentType" placeholder="请选择" clearable  >
                      <el-option
                        v-for="item in form.investmentTypeArray"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资产转让总额:"  prop='totalAssets'>
                    <el-input type="text" auto-complete="off" v-model="form.totalAssets" placeholder="请输入资产转让总额" 
                    class="input-with-select" 
                      clearable> 
                    <el-button slot="append" icon="el-icon-search" @click="countProfit" 
                    :loading="form.countLoading"  >计算收益率</el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="预期收益率:">
                    {{form.totalAssetsReturn}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="服务人员:" prop="salemanName">
                    <el-select
                      v-model="form.salemanName"
                      filterable
                      remote
                      placeholder="请输入服务人员"
                      :remote-method="inputsalemanNameMethod"
                      :loading="inputsalemanNameLoading"
                      @change="salemanNameChange">
                        <el-option
                          v-for="item in inputsalemanNameArray"
                          :key="item.salemanId"
                          :label="item.area+item.part+item.group+item.salemanName"
                          :value="item.salemanName"
                        >
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="title=='查看信息' && form.receiptSellBackTime!=null">
                  回执回销时间：{{form.receiptSellBackTime}}
                </el-col>
              </el-row>   
            </el-form>
            <slot></slot>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="sureAdd('form')">确 定</el-button>
              <el-button type="danger" @click="cancelAdd">驳回</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
var productId = -1;
var salemanId = "";
var contractId = -1;
export default {
  name: "DialogForm",
  props: ["forminfo"],
  data() {
    return {
      title: "",
      dialogFormVisible: false,
      formInfo: this.info,
      dialogLoading: false,
      disabled: false,
      inputContractNoLoading: false,
      inputsalemanNameLoading: false,
      inputContractNoArray: [],
      inputsalemanNameArray: [],
      birthdayOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form: {
        title: "录入合同",
        contractNo: "",
        productName: "请输入合同编号",
        standardCoefficient: 0,
        customerName: "",
        idCard: "",
        sex: "男",
        birthday: "",
        age: "",
        payBankCard: "",
        receiveBankCard: "",
        payOpeningBank: "",
        receiveOpeningBank: "",
        telPhone: "",
        address: "",
        totalAssets: "",
        totalAssetsReturn: 0,
        investmentType: "",
        investmentTypeArray: [
          {
            value: "网银",
            label: "网银"
          },
          {
            value: "POS",
            label: "POS"
          },
          {
            value: "银行柜面",
            label: "银行柜面"
          },
          {
            value: "代付",
            label: "代付"
          }
        ],
        salemanName: "",
        // remark: "",
        countLoading: false
      },
      rules: {
        contractNo: [
          { required: true, message: "请输入合同编号", trigger: "blur" }
        ],
        customerName: [
          { required: true, message: "请输入资产受让人", trigger: "blur" }
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        birthday: [{ required: true, message: "请输入生日", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        payBankCard: [
          { required: true, message: "请输入打款账号", trigger: "blur" }
        ],
        receiveBankCard: [
          { required: true, message: "请输入收款账号", trigger: "blur" }
        ],
        payOpeningBank: [
          { required: true, message: "请输入打款银行开户行", trigger: "blur" }
        ],
        receiveOpeningBank: [
          { required: true, message: "请输入收款银行开户行", trigger: "blur" }
        ],
        telPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" }
        ],
        investmentType: [
          { required: true, message: "请选择投资方式", trigger: "change" }
        ],
        totalAssets: [
          { required: true, message: "请输入资产转让总额", trigger: "blur" }
        ],
        salemanName: [
          { required: true, message: "请输入服务人员", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    var that = this;
    //表单组件里点击查看信息
    this.bus.$on("showdialog", function(msg) {
      that.form = msg;
      that.form.totalAssetsReturn = msg.returnRate + "%";
      that.form.salemanName =
        msg.salemanInfo.area +
        msg.salemanInfo.part +
        msg.salemanInfo.group +
        msg.salemanInfo.salemanName;
      that.disabled = true;
      that.title = "财务审核";
      productId = msg.productId;
      contractId = msg.contractId;
      salemanId = msg.salemanId;
      that.dialogFormVisible = true;
    });
  },
  watch: {},
  methods: {
    initData: function() {
      this.bus.$emit("tableReflash");
    },
    //输入合同编号匹配数组
    inputContractNoMethod: function(query) {
      if (query !== "") {
        this.inputContractNoLoading = true;
        this.getRequest("/auditor/matchingContractNo?contractNo=" + query).then(
          resp => {
            if (resp && resp.data.status == 200) {
              this.inputContractNoArray = resp.data.obj;
            }
            this.inputContractNoLoading = false;
          }
        );
      } else {
        this.inputContractNoArray = [];
      }
    },
    // 合同编号发生变化
    contractNoChange: function(e) {
      var that = this;
      if (e == "") {
        this.form.productName = "请输入合同编号";
        this.form.standardCoefficient = 0;
        productId = -1;
      } else {
        this.getRequest("/auditor/matchingContractNo?contractNo=" + e)
          .then(resp => {
            if (resp && resp.data.status == 200) {
              productId = resp.data.obj[0].productId;
              return resp.data.obj[0].productId;
            }
          })
          .then(function(data) {
            that.getRequest("/product/get?productId=" + data).then(resp => {
              if (resp && resp.data.status == 200) {
                that.form.productName = resp.data.obj.productName;
                that.form.standardCoefficient =
                  resp.data.obj.standardCoefficient;
              }
            });
          });
      }
      this.form.contractNo = e;
    },
    //输入资产受让人
    querySearchAsync(queryString, cb) {
      var that = this;
      if (queryString != "") {
        that
          .getRequest("/auditor/matchingCustomer?customerName=" + queryString)
          .then(resp => {
            if (resp && resp.data.status == 200) {
              var results = [];
              var string = resp.data.obj;
              results = queryString
                ? string.filter(this.createStateFilter(queryString))
                : string;
              cb(results);
            }
          });
      } else {
        //当资产受让人被清空的时候，将原来带上的信息清空
        // this.form.idCard = "";
        // this.form.sex = "";
        // this.form.birthday = "";
        // this.form.age = "";
        // this.form.payBankCard = "";
        // this.form.receiveBankCard = "";
        // this.form.payOpeningBank = "";
        // this.form.receiveOpeningBank = "";
        // this.form.telPhone = "";
        // this.form.address = "";
        cb(queryString ? [].filter(this.createStateFilter(queryString)) : []);
      }
    },
    // 搜索匹配资产受让人的过滤器
    createStateFilter(queryString) {
      return state => {
        state.value = state.customerName; //匹配显示的字段必须叫value
        state.idCard = state.idCard;
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    //选择资产受让人
    selectName: function(item) {
      this.form.idCard = item.idCard;
      this.form.sex = item.sex;
      this.form.birthday = item.birthday;
      this.form.age = item.age;
      this.form.payBankCard = item.payBankCard;
      this.form.receiveBankCard = item.receiveBankCard;
      this.form.payOpeningBank = item.payOpeningBank;
      this.form.receiveOpeningBank = item.receiveOpeningBank;
      this.form.telPhone = item.telPhone;
      this.form.address = item.address;
    },
    //计算收益率
    countProfit: function() {
      var that = this;
      if (productId == -1) {
        this.common.showToast("info", "请输入合同编号");
      } else if (this.common.isNull(this.form.totalAssets)) {
        this.common.showToast("info", "请输入资产转让总额");
      } else {
        that.dialogLoading = true;
        that.form.countLoading = true;
        that
          .getRequest(
            "/auditor/investmentFormulaCalc?productId=" +
              productId +
              "&totalAssets=" +
              that.form.totalAssets
          )
          .then(resp => {
            that.dialogLoading = false;
            that.form.countLoading = false;
            if (resp && resp.data.status == 200) {
              that.form.totalAssetsReturn = resp.data.obj + "%";
            }
          });
      }
    },
    // 输入服务人员
    inputsalemanNameMethod: function(query) {
      if (query !== "") {
        this.inputsalemanNameLoading = true;
        this.getRequest("/auditor/matchingSaleman?salemanName=" + query).then(
          resp => {
            if (resp && resp.data.status == 200) {
              this.inputsalemanNameArray = resp.data.obj;
            }
            this.inputsalemanNameLoading = false;
          }
        );
      } else {
        this.inputsalemanNameArray = [];
      }
    },
    // 服务人员发生变化
    salemanNameChange: function(e) {
      var that = this;
      if (e == "") {
        salemanId = "";
      } else {
        that.dialogLoading = true;
        this.getRequest("/auditor/matchingSaleman?salemanName=" + e).then(
          resp => {
            that.dialogLoading = false;
            if (resp && resp.data.status == 200) {
              salemanId = resp.data.obj[0].salemanId;
            }
          }
        );
      }
    },
    //确认录入
    sureAdd: function(form) {
      console.log(this.form);
      console.log(salemanId);
      console.log(productId);
      console.log(contractId);
      this.$refs[form].validate(valid => {
        if (valid) {
          var that = this;
          if (this.title == "录入合同") {
            this.dialogLoading = true;
            this.putRequest("/auditor/insert", {
              contractNo: this.form.contractNo,
              productName: this.form.productName,
              productId: productId,
              totalAssets: this.form.totalAssets,
              investmentType: this.form.investmentType,
              salemanId: salemanId,
              customerName: this.form.customerName,
              idCard: this.form.idCard,
              sex: this.form.sex,
              birthday: this.form.birthday,
              payBankCard: this.form.payBankCard,
              payOpeningBank: this.form.payOpeningBank,
              receiveBankCard: this.form.receiveBankCard,
              receiveOpeningBank: this.form.receiveOpeningBank,
              telPhone: this.form.telPhone,
              address: this.form.address
              // remark: this.form.remark
            }).then(resp => {
              that.dialogLoading = false;
              if (resp && resp.data.status == 200) {
                that.dialogFormVisible = false;
                that.common.showToast("success", resp.data.msg);
                this.formInit();
                this.initData();
              }
            });
          } else if (this.title == "修改信息") {
            this.dialogLoading = true;
            this.putRequest("/auditor/update", {
              contractId: contractId,
              contractNo: this.form.contractNo,
              productName: this.form.productName,
              productId: productId,
              totalAssets: this.form.totalAssets,
              investmentType: this.form.investmentType,
              salemanId: salemanId,
              customerName: this.form.customerName,
              idCard: this.form.idCard,
              sex: this.form.sex,
              birthday: this.form.birthday,
              payBankCard: this.form.payBankCard,
              payOpeningBank: this.form.payOpeningBank,
              receiveBankCard: this.form.receiveBankCard,
              receiveOpeningBank: this.form.receiveOpeningBank,
              telPhone: this.form.telPhone,
              address: this.form.address
              // remark: this.form.remark
            }).then(resp => {
              that.dialogLoading = false;
              if (resp && resp.data.status == 200) {
                that.dialogFormVisible = false;
                that.common.showToast("success", resp.data.msg);
                this.formInit();
                this.initData();
              }
            });
          } else if (this.title == "财务审核") {
            if (this.common.isNull(this.forminfo.bankEceivedAmount)) {
              this.common.showToast("info", "请输入银行到账金额");
            } else if (this.common.isNull(this.forminfo.bankFee)) {
              this.common.showToast("info", "请输入手续费");
            } else if (
              this.common.isNull(this.forminfo.bankReceivedDate) ||
              this.forminfo.bankReceivedDate == null
            ) {
              this.common.showToast("info", "请选择银行到账日期");
            } else {
              this.dialogLoading = true;
              this.putRequest("/finance/verify", {
                contractId: contractId,
                bankEceivedAmount: this.forminfo.bankEceivedAmount,
                bankFee: this.forminfo.bankFee,
                bankReceivedDate: this.forminfo.bankReceivedDate
              }).then(resp => {
                that.dialogLoading = false;
                if (resp && resp.data.status == 200) {
                  that.dialogFormVisible = false;
                  that.common.showToast("success", resp.data.msg);
                  this.formInit();
                  this.initData();
                }
              });
            }
          } else {
          }
        } else {
          return false;
        }
      });
    },
    cancelAdd: function() {
      var that=this;
      if (this.common.isNull(this.forminfo.remark)) {
        this.common.showToast("info", "请输入驳回理由");
      } else {
        this.dialogLoading = true;
        this.postRequest("/finance/reject", {
          contractId: contractId,
          remark:this.forminfo.remark,
        }).then(resp => {
          that.dialogLoading = false;
          if (resp && resp.data.status == 200) {
            that.dialogFormVisible = false;
            that.common.showToast("success", resp.data.msg);
            this.formInit();
            this.initData();
          }
        });
      }
    },
    dialogClose: function() {
      this.dialogFormVisible = false;
      //如果不是录入合同状态关闭的，则清空form表单内容
      if (this.title != "录入合同") {
        this.formInit();
        // this.initData();
      }
    },
    // 表单初始化
    formInit: function() {
      salemanId = "";
      productId = -1;
      this.form = {
        title: "录入合同",
        contractNo: "",
        productName: "请输入合同编号",
        standardCoefficient: 0,
        customerName: "",
        idCard: "",
        sex: "男",
        birthday: "",
        age: "",
        payBankCard: "",
        receiveBankCard: "",
        payOpeningBank: "",
        receiveOpeningBank: "",
        telPhone: "",
        address: "",
        totalAssets: "",
        totalAssetsReturn: 0,
        investmentType: "网银",
        investmentTypeArray: [
          {
            value: "网银",
            label: "网银"
          },
          {
            value: "POS",
            label: "POS"
          },
          {
            value: "银行柜面",
            label: "银行柜面"
          },
          {
            value: "代付",
            label: "代付"
          }
        ],
        salemanName: "",
        // remark: "",
        countLoading: false
      };
    }
  }
};
</script>
<style scoped>
.el-row {
  margin-top: 10px;
}
.el-col {
  height: 50px;
  line-height: 50px;
  text-align: left;
}
.el-input {
  width: 70%;
}
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
.idcard {
  border-bottom: 1px solid #ccc;
}
</style>

